import { CurrentUser } from '@/data/login';
import TagList from '@/pages/account/center/components/TagList';
import TeamList from '@/pages/account/center/components/TeamList';
import { ClusterOutlined, ContactsOutlined, HomeOutlined } from '@ant-design/icons';
import { GridContent } from '@ant-design/pro-components';
import { useModel } from '@umijs/max';
import { Card, Col, Divider, Row } from 'antd';
import React, { useState } from 'react';
import useStyles from './Center.style';
import Applications from './components/Applications';
import Articles from './components/Articles';
import Projects from './components/Projects';

const operationTabList = [
  {
    key: 'articles',
    tab: (
      <span>
        文章
        <span
          style={{
            fontSize: 14,
          }}
        >
          (8)
        </span>
      </span>
    ),
  },
  {
    key: 'applications',
    tab: (
      <span>
        应用
        <span
          style={{
            fontSize: 14,
          }}
        >
          (8)
        </span>
      </span>
    ),
  },
  {
    key: 'projects',
    tab: (
      <span>
        项目
        <span
          style={{
            fontSize: 14,
          }}
        >
          (8)
        </span>
      </span>
    ),
  },
];

const Center: React.FC = () => {
  const { styles } = useStyles();
  const [tabKey, setTabKey] = useState<any>('articles');
  const { initialState } = useModel('@@initialState');
  const { currentUser } = initialState || {};
  const loading = false;

  const renderUserInfo = ({ username }: Partial<CurrentUser>) => {
    return (
      <div className={styles.detail}>
        <p>
          <ContactsOutlined
            style={{
              marginRight: 8,
            }}
          />
          交互专家
        </p>
        <p>
          <ClusterOutlined
            style={{
              marginRight: 8,
            }}
          />
          蚂蚁金服－某某某事业群－某某平台部－某某技术部－UED
        </p>
        <p>
          <HomeOutlined
            style={{
              marginRight: 8,
            }}
          />
          浙江省杭州市
        </p>
      </div>
    );
  };

  // 渲染tab切换
  const renderChildrenByTabKey = (tabValue: any) => {
    if (tabValue === 'projects') {
      return <Projects />;
    }
    if (tabValue === 'applications') {
      return <Applications />;
    }
    if (tabValue === 'articles') {
      return <Articles />;
    }
    return null;
  };
  return (
    <GridContent>
      <Row gutter={24}>
        <Col lg={7} md={24}>
          <Card
            bordered={false}
            style={{
              marginBottom: 24,
            }}
            loading={loading}
          >
            {!loading && currentUser && (
              <div>
                <div className={styles.avatarHolder}>
                  <img
                    alt=""
                    src={currentUser.avatar}
                    style={{
                      width: '80px', // 设置头像尺寸（根据需求调整）
                      height: '80px',
                      borderRadius: '50%', // 关键：设置为50%实现圆形
                      objectFit: 'cover', // 图片自适应裁剪，避免拉伸变形
                    }}
                  />
                  <div className={styles.name}>{currentUser.username}</div>
                  <div>海纳百川，有容乃大</div>
                </div>
                {renderUserInfo(currentUser)}
                <Divider dashed />
                <TagList />
                <Divider
                  style={{
                    marginTop: 16,
                  }}
                  dashed
                />
                <TeamList></TeamList>

              </div>
            )}
          </Card>
        </Col>
        <Col lg={17} md={24}>
          <Card
            className={styles.tabsCard}
            bordered={false}
            tabList={operationTabList}
            activeTabKey={tabKey}
            onTabChange={(_tabKey: string) => {
              setTabKey(_tabKey);
            }}
          >
            {renderChildrenByTabKey(tabKey)}
          </Card>
        </Col>
      </Row>
    </GridContent>
  );
};
export default Center;
